@import "pile-base.less";
.pile-dialog{
  .pile_dialog {
    position: fixed;
    z-index: 999;
    width: 85%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: @fill-base;
    text-align: center;
    border-radius: @radius-xs;
    padding:20px 0 0 0;
  }
  .pile-load-loading{
    background: none;
  }
  /*
  toast
  */
  .pile_toast{
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.8);
    top:50%;
    left:50%;
    position: fixed;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    z-index: 1000;
    border-radius: @radius-xs;
    text-align: center;
    padding: 0 8px 30px 8px;
    .toast_icon{
      font-size: @icon-size-big;
      margin:30px 0 20px;
      &.icon-warning{
        .path1::before{
          color: #adadad;
        }
        .path2::before{
          color: rgba(0, 0, 0, 0.8);
        }
      }
      &.icon-success{
        .path1{
          color: #adadad;
        }
        .path2,.path3{
          color: rgba(0, 0, 0, 0.8);
        }
      }
    }
    .pile_toast_content{
      color: @color-text-base-inverse;
      font-size: @font-size-base;
      line-height: 20px;
      display: inline-block;
    }
  }
  .pile_icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-size: 100% 100%;
    background-repeat: no-repeat
  }

  .pile_dialog_confirm .pile_icon{
    margin : 0px 0 11px;
    display: inline-block;
    background-size: 100% 100%;
    background-repeat: no-repeat
  }
  .pile_dialog_confirm .pile_dialog{
    background : @fill-base;
    width : 267px;
    text-align : center;
  }
  .pile_dialog_confirm .title_font{
    line-height : 22px;
    margin-bottom : 16px;
    font-size : @font-size-caption;
    color : @color-text-base;
    overflow : hidden;
  }

  .pile_dialog_confirm .pile_icon_none{
    height:0px;
  }

  .pile_btn_alert a,.pile_dialog_confirm a{
    display: inline-block;
    height: 44px;
    line-height: 44px;
    margin: 0;
    border-radius: @radius-xs;
    font-size: @font-size-caption;
    text-align: center;
    text-decoration: none;
    cursor: default;
    background-clip: padding-box;
    box-sizing: border-box;
  }
  .pile_dialog_confirm a {
    float: left;
  }
  .pile_btn_alert a {
    width: 100%;
  }
  .pile_dialog_confirm a.btn_orange,.pile_btn_alert a.btn_orange {
    color: @color-icon-base;
    line-height: 50px;font-size: @font-size-caption;
    position: relative;
    height: 50px;
    background-color: transparent;
  }
  .pile_dialog_alert{
    .pile_dialog_confirm a.btn_orange,.pile_btn_alert a.btn_orange {
      border-top: 1px solid #eee;
    }
  }
  .pile_nconfirm{
    position: fixed;
    z-index: 113;
    width: 100%;
    bottom: -300px;
    left: 50%;
    -webkit-transform: translate(-50%,110%);
    transform: translate(-50%,110%);
    text-align: center;
    padding: 0;
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .pile_nconfirm.show{
    bottom:0px;padding-bottom: constant(safe-area-inset-bottom);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
  }
  .pile_dialog_nconfirm{
    top:-1000px;
    position: fixed;
    -webkit-transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1)  450ms;
    transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1)  450ms;
    width: 100%;
    height: 100%;
  }
  .pile_dialog_nconfirm.show {
    top:0px;
    -webkit-transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .pile_nconfirm a{
    font-size: @font-size-caption;
    padding:16px 8px;
    color:@color-icon-base;
    display:block;
  }
  .pile_nconfirm a.primary{
    color:@color-link-danger;
  }
  .pile_nconfirm_bd a.default{
    color:@color-text-base;
  }
  .pile_dialog_nconfirm .pile_mask{
    position: absolute;
  }
  .pile_nconfirm_hd,.pile_nconfirm_bd,.pile_nconfirm_ft{
    background: @fill-body;
  }
  .pile_nconfirm_hd{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 10px 0;
  }
  .pile_nconfirm_bd .pile_btn_nconfirm{
    display: block;
    border-top: 1px solid @border-color-light;
  }
  .pile_nconfirm_bd{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  .pile_nconfirm_hd .pile_nconfirm_title{
    color:@color-text-light;
    font-size:@font-size-caption-sm;
    height: 30px;
    line-height: 30px;
  }
  .pile_nconfirm_ft{
   border-top: 6px solid @fill-disabled;
  }
  .d_btns {
      width: 100%;border-top: 1px solid @fill-disabled;
  }
  .pile_dialog_alert .d_btns{border-top:none; }
  .tips-title,.tips-content{padding: 0 16px;}
  .icon-popup_right,.icon-popup_warning{width: 50px;height: 50px;border-radius: 50%;background: @fill-float;line-height: 50px;font-size: @icon-size-base;}
  .pile_btn_confirm{position: relative;.displayflex;}
  .pile_btn_confirm a{.flex;height: 50px;position: relative;line-height: 50px;background-color: transparent;border-left: 1px solid @border-color-light;color: @color-text-default}
  .pile_btn_confirm a:first-child{border: none;}
  .pile_toast{
    padding: 16px 16px 16px 50px;text-align: left;width: auto;margin-left: 0;
    .toast_icon{position: absolute;left:16px;top:50%;margin-top: -12px;font-size: @icon-size-base;color: @color-text-disabled }
    .pile_toast_content{white-space: nowrap;color: @color-text-disabled;margin-bottom: 0}
  }
  .dialog-alert-content{padding-bottom: 20px;font-size: @font-size-base;color: @color-text-default;line-height: @line-height-paragraph;margin: 0 16px;}
  .dialog-confirm-content{padding-bottom: 20px;font-size: @font-size-base}
  .pile_icon.icon-popup_null{display: none;}
}
.pile-dialog .pile_icon_hide,.pile-dialog .pile_dialog_confirm .pile_icon_hide{display: none;}
.pile-dialog-toast .pile_mask{background: rgba(0, 0, 0, 0);}
/* Bubble */
.pile-bubble{
  position: absolute;z-index:10;padding: 14px 16px;background: @fill-highlight;border-radius: @radius-xs;color: @color-text-base-inverse;font-size:@font-size-caption-sm;
}
.pile-bubble-close{
  padding-right: 35px;
  .bubble-close{position: absolute;right:15px;height: 11px;width: 11px;top:14px;color: @color-text-base-inverse;}
}
.pile-bubble-right:after{content:"";position: absolute;left:-6px;height: 0;width: 0;overflow: hidden;border-right: 6px solid @border-color-highlight;top:50%;border-top: 6px solid transparent;border-bottom: 6px solid transparent;margin-top: -6px;}
.pile-bubble-left:after{content:"";position: absolute;right:-5px;height: 0;width: 0;overflow: hidden;border-left: 6px solid @border-color-highlight;top:50%;border-top: 6px solid transparent;border-bottom: 6px solid transparent;margin-top: -6px;}
.pile-bubble-bottom:after{content:"";position: absolute;height: 0;width: 0;overflow: hidden;border-bottom: 6px solid @border-color-highlight;top:-6px;left:50%;border-left: 6px solid transparent;border-right: 6px solid transparent;margin-left: -6px;}
.pile-bubble-top:after{content:"";position: absolute;height: 0;width: 0;overflow: hidden;border-top: 6px solid @border-color-highlight;bottom:-6px;left:50%;border-left: 6px solid transparent;border-right: 6px solid transparent;margin-left: -6px;}
.pile-bubble-top.pile-bubble-1:after,.pile-bubble-bottom.pile-bubble-1:after{left:20px;margin-left: 0}
.pile-bubble-top.pile-bubble-2:after,.pile-bubble-bottom.pile-bubble-2:after{left:auto;margin-left: 0;right:20px;}
.pile-bubble-left.pile-bubble-1:after,.pile-bubble-right.pile-bubble-1:after{top:20px;margin-top: 0}
.pile-bubble-left.pile-bubble-2:after,.pile-bubble-right.pile-bubble-2:after{top:auto;margin-top: 0;bottom:20px;}
